const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    }),
    opacity: 1
})
let map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([107.11040599933166, 34.26271532332011]),
        zoom: 8
    })
});

const wktFormat = new ol.format.WKT()
fetch('./data/data.json').then(res => res.json()).then(res => {
    const features = res.map(r => {
        const {wkt} = r
        const geom = wktFormat.readGeometry(wkt, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        })
        return new ol.Feature({
            geometry: geom,
            ...r
        })
    })
    const source = new ol.source.Vector({
        features: features
    });
    const style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 9,
            stroke: new ol.style.Stroke({
                color: '#FFFFF0',// 'rgba(139, 0, 139, 0.4)',
                width: 4
            }),
            fill: new ol.style.Fill({
                color: '#ae14eb'
            })
        })
    })
    const vectorLayer = new ol.layer.Vector({
        source,
        style
    })
    map.addLayer(vectorLayer)
})
